<template>
        <div class="goodsEntry">
          <div style="padding: 20px">
              <el-button type="primary" @click="returnOver">返回</el-button>
          </div>
          <!-- <ul class="query">
            <li class="query-item">
              <span>扫码录入日期：</span>
              <el-date-picker
              value-format="yyyy-MM-dd"
              :clearable="false"
              v-model="endtime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeTime">
            </el-date-picker>
            </li>
            <li class="query-item">
              <span>关键字搜索：</span>
              <el-input style="width: 300px;" v-model="queryData.keyword" placeholder="请输入商品ID,编码,商品名称,规格型号" size="medium"></el-input>
            </li>
            <li class="query-item">
              <span>商品分类：</span>
              <el-select v-model="queryData.category" size="medium">
                <el-option value="1" label="11"></el-option>
                <el-option value="2" label="22"></el-option>
              </el-select>
            </li>
            <li class="query-item">
              <el-button type="primary" size="medium" @click="query">查询</el-button>
              <el-button type="primary" size="medium" @click="exportData">导出</el-button>
            </li>
          </ul> -->
          <el-row class="entry-info">
           
            <!-- <el-col :span="3" class="goods-count"> 商品总量：6 </el-col>  -->
            <el-col :span="8" class="goods-id">
              <input type="text" @keyup.enter="smentry()" autofocus style="width:350px" v-model="queryData.goodsId">
              <el-button type="primary" size="medium"  @click="smentry()">确定</el-button>
            </el-col>
           <el-col :span="6" :offset="2" class="btn-wrapper">
              <el-button type="primary" size="medium" @click="okentry">确定录入</el-button>
              <el-button type="warning" size="medium" @click="canceloffAll">取消录入</el-button>
            </el-col>
          </el-row>
          <div class="wrapper">
            <el-table class="table" :data="tableData" stripe highlight-current-row border @selection-change="handleSelectionChange">
             <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column align="center" type="selection">
                </el-table-column>
              <el-table-column align="center" prop="goods_id" label="商品ID">
              </el-table-column>
              <el-table-column align="center" prop="create_time" label="扫码录入时间">
              </el-table-column>
              <el-table-column align="center" prop="goods_no" label="商品编码">
              </el-table-column>
              <el-table-column align="center" prop="goods_name" label="商品名称">
              </el-table-column>
              <el-table-column align="center" prop="sku_no" label="SKU编码">
              </el-table-column>
              <el-table-column align="center" prop="goods_kind_first" label="商品类别">
              </el-table-column>
              <el-table-column align="center" prop="odor_type" label="香型">
              </el-table-column>
              <el-table-column align="center" prop="net_content" label="净含量">
              </el-table-column>
              <el-table-column align="center" prop="alocohl" label="酒精度">
              </el-table-column>
              <el-table-column align="center" prop="unit" label="单位">
              </el-table-column>
              <el-table-column align="center" prop="raw_desc" label="原料">
              </el-table-column>
              <el-table-column align="center" prop="address" label="操作" width="150">
                <template slot-scope="scope">
                  <span class="canceloff-btn" @click="canceloffOne(scope.row)">取消录入</span>
                </template>
              </el-table-column>
            </el-table>
            <div style="height:50px">
              <!-- <el-pagination background layout="total,prev, pager, next,jumper" :page-size="page.pageSize" :total="page.total" :current-page="page.current"
              @current-change="handleCurrentChange">
            </el-pagination> -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[10,20,30]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
            </div>
          </div>
          <audio id="myaudio" src="../../viode/004.mp3" controls="controls" hidden="hidden" ></audio>
          <audio id="warn" src="../../viode/warn.mp3" controls="controls"  hidden="hidden"></audio>
         
        </div>
      </template>
      
      <script>
        export default {
          data() {
            return {
              height: "auto",
              //扫描编码
              goodsIds:'',
              queryData: {
                starttime:'',
                endtime:'',
                goodsId:''
              },
              goodsCates: {
                show: false,
                tableData: [{}]
              },
              tableData: [{}],
              
              endtime:'',
              page: {
                pageSize: 10,
                current: 1,
                total: 100
              },
              status:false
            };
          },
          mounted () {
            this.tableList();
            
          },
          methods: {
            //初始化数据
            async tableList() {
              try {
                let { data } = await this.$post({
                  api: "/show/managegoods",
                  data:{
                    current:this.page.current,
                    pageSize:this.page.pageSize,
                    startTime:this.queryData.startTime,
                    endTime:this.queryData.endTime,
                    goodsId:this.queryData.goodsId,
                    status:0,
                    goodsKindSecond:''
                  }
                });
                if (data.code === 0) {
                  this.tableData = data.data;
                  this.page.total = data.rdPage.total;
                  // this.page.total = data.rdPage.total;
                  // console.log(data)
                  // this.rawList = data.data;
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
          },
            //取消录入
            async storegoods() {
              try {
                let { data } = await this.$post({
                  api: "/delete/goods",
                  data:{
                    goodsIds:this.goodsIds
                   
                  }
                });
                if (data.code === 0) {
                  this.tableList();
                  this.$message({
                  type: "success",
                  message: data.msg
                 });
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
          //确认录入
          async addstoregoods() {
              try {
                let { data } = await this.$post({
                  api: "/sure/addgoods",
                  data:{
                    goodsIds:this.goodsIds
                  }
                });
                if (data.code === 0) {
                  this.tableList();
                  this.$message({
                  type: "success",
                  message: data.msg
                 });

                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
           //扫描入库
           async factoryGoods() {
              try {
                let { data } = await this.$post({
                  api: "/scan/goodsid",
                  data:{
                    goodsId:this.queryData.goodsId
                  }
                });
                if (data.code === 0) {
                  this.tableList();
                  this.$message({
                  type: "success",
                  message: data.msg
                 });
                 
                 this.autoplays();
                 this.$router.go(1);
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                  this.warnplay();
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
           smentry(){
             if(this.queryData.goodsId == ''){
              this.$message({
                  type: "error",
                  message: '扫描商品不能为空'
                });
             }else{
              this.factoryGoods();
              this.queryData.goodsId = '';
             }
            
           
           },
           //音频录入
           autoplays(){
             let audio =  document.getElementById('myaudio')
             audio.currentTime = 0
             audio.play();
            // this.$netxTick(function(){
              // console.log(document.getElementById('myaudio'), 999)
               
            //  })
           },
           //
           warnplay(){
             let warn = document.getElementById('warn');
             warn.currentTime = 0
             warn.play();
           },
          //拿到多选
            handleSelectionChange(val){
              let array = [];
              val.forEach(element => {
                array.push(
                   element.goods_id
                )
              });
              
              this.goodsIds = array.join(',');
             
            },
            //确定录入
            okentry(){
              if(this.goodsIds == ''){
                this.$message({
                  type: "error",
                  message: "请选择对应商品的勾选框"
                });
              }else{
                this.$confirm("确认录入此数据，您确定要录入吗?", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.addstoregoods();
                // this.$message({
                //   type: "success",
                //   message: "删除成功!"
                // });
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
              }
             
            },
            //
            canceloffAll() {
              if(this.goodsIds == ''){
                this.$message({
                  type: "error",
                  message: "请选择对应商品的勾选框"
                });
              }else{
                this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.storegoods(); 
                // this.$message({
                //   type: "success",
                //   message: "删除成功!"
                // });
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
              }
            },
            //单个取消录入
            canceloffOne(row) {
              this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.goodsIds = row.goods_id;
                this.storegoods(); 
                // this.$message({
                //   type: "success",
                //   message: "删除成功!"
                // });
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
            },
            handleCurrentChange(val) {
              this.page.current = val;
              this.tableList();
              console.log(val);
            },
            handleSizeChange(val){
              this.page.pageSize = val;
              this.tableList();
            },
            showCateDialog() {
              this.goodsCates.show = true;
            },
            //时间选择器
            changeTime(arr){
              console.log(arr)
              this.queryData.starttime = arr[0];
              this.queryData.endtime = arr[1];
            },
            returnOver(){
              this.$router.go(-1);
            }
          }
        };
      </script>
      
      <style lang="scss" scoped>
        .query {
          overflow: hidden;
          border-bottom: 1px solid #eeeeee;
          &-item {
            float: left;
            margin: 15px 20px;
          }
          .el-input {
            width: 150px;
          }
          .el-button {
            margin: 0 15px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      
        .entry-info {
          padding: 15px 20px;
          border-bottom: 1px solid #eeeeee;
        }
      
        .goods-category {
          line-height: 32px;
          span {
            color: #0033ff;
            text-decoration: underline;
            cursor: pointer;
          }
        }
      
        .goods-count {
          line-height: 32px;
        }
      
        .goods-id {
          display: flex;
          justify-content: space-between;
          padding: 0 40px;
          border-left: 1px solid #000;
          border-right: 1px solid #000;
          span {
            position: relative;
            display: inline-block;
            padding: 8px 15px;
            border: 1px solid #333;
            &:after {
              content: "";
              position: absolute;
              top: -6px;
              left: -6px;
              width: 100%;
              height: 100%;
              padding: 6px;
              border: 1px solid #333;
            }
          }
        }
      
        .wrapper {
          padding: 10px 15px;
        }
      
        .canceloff-btn {
          color: #0033ff;
          cursor: pointer;
        }
      </style>